<template>
	<!-- 我的钱包 -->
	<view class="my-wallet">
		<nav-bar :title="i18n.wallet.title" @_back="_back" />
		<div class="container">
			<view class="wallet-box" v-for="item in walletList" :key="item.id">
				<view class="dis-between">
					<text class="main-color bold">{{item.currencyname}}</text>
					<view>
						<u-icon @click="addWallet(item.id)" name="edit-pen-fill" color="rgba(255, 255, 255, .4)" size="36"></u-icon>
						<uni-icons @click="deleteWallet(item.id)" class="trash" type="trash-filled" color="rgba(255, 255, 255, .4)" size="36"></uni-icons>
					</view>
				</view>
				<text>{{item.links}}</text>
				<view class="remark">
					<text>{{item.notes}}</text>
				</view>
			</view>
			<custom-submit :title="i18n.wallet.addWallet" @click="addWallet"></custom-submit>
		</div>
		<tips-popup ref="tips" @click="walletDelete"></tips-popup>
	</view>
</template>

<script>
	import mixin from '@/utils/minix.js'
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import CustomSubmit from '@/components/CustomSubmit/index.vue'
	import TipsPopup from '@/components/TipsPopup/index.vue'
	import { mapGetters, mapActions } from 'vuex'
	import { Toast } from '@/utils/util.js'
	export default {
		mixins: [mixin],
		components: {
			uniIcons,
			CustomSubmit,
			TipsPopup
		},
		computed: {
			...mapGetters(['walletList']),
			i18n() {
				return this.$t('message');
			},
		},
		data() {
			return {
				deleteId: 0
			}
		},
		methods: {
			...mapActions({walletDeleteList: 'wallet/walletDelete'}),
			addWallet(id) {
				uni.navigateTo({
					url: '/pages/wallet/add?id=' + id
				})
			},
			// 删除
			deleteWallet(id) {
				this.$refs.tips.open('other', this.i18n.common.isDelete);
				this.deleteId = id;
			},
			walletDelete() {
				this.walletDeleteList(this.deleteId).then(() => {
					Toast(this.i18n.common.deleteSuccess);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-wallet {
		.wallet-box {
			padding: 40rpx 30rpx;
			background-color: #252c46;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			color: rgba(255, 255, 255, .54);
			font-size: 28rpx;
			
			.dis-between {
				font-size: 36rpx;
				height: 36rpx;
				align-items: center;
				margin-bottom: 40rpx;
				.trash {
					margin-left: 60rpx;
				}
			}
			
			& > text {
				display: inline-block;
				height: 28rpx;
				line-height: 28rpx;
				margin-bottom: 30rpx;
			}
		}
	}
</style>
